﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="Fuqingrenzaixini._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDRxymu3G5nFQuVp3f573YfU3VvERK6tCk&sensor=false">
	 </script>
     <script type="text/javascript">
         
         var latlng = null;
         var map = null;
         var marker = null ;
         var locations = [
              ['悉尼', - 33.8839, 151.2007],
              ['福清', 25.728158, 119.385681]
          ];
         //initializes goolge map
         function initialize() {
             latlng = new google.maps.LatLng(-33.87013, 151.207581);
             var myOptions = {
                 zoom: 2,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             }

             map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

             //displays overlay for two locations 
             for (var i = 0; i < locations.length; i++) {
                 latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
                 marker = new google.maps.Marker({
                     position: latlng,
                     title: locations[i][0],
                     map: map
                 });
             }
             setPolyline();

         }

         //draws polyline for two locations
         function setPolyline() {
             var paylineCoordinates = [
             new google.maps.LatLng(locations[0][1], locations[0][2]),
             new google.maps.LatLng(locations[1][1], locations[1][2])
             ];

             var path = new google.maps.Polyline({
                 path: paylineCoordinates,
                 strokeColor: "#FF0000",
                 strokeOpacity: 1.0,
                 strokeWeight: 2
             });
             path.setMap(map);
             showFuqingInfo();
         }

         //poups a infowindow about fuqing
         function showFuqingInfo() {
             var fuqingInformation = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h2 id="firstHeading" class="firstHeading">福清</h2>' +
            '<div id="bodyContent">' +
            '<p>福清简称“融”，是一座置县历史长达1300多年的千年古邑，' +
            '也是一座得益于改革开放而兴起的新兴现代化港口工业城市， ' +
            '1990年撤县建市，现辖17镇7街475个村（社区），市域总面积2430' +
            '2430平方公里，其中陆域1519平方公里，海域911平方公里，现有' +
            '户籍人口123万(2010年人口普查数据)。2009年全市地区生产总值' +
            '达435.5亿元，工业总产值达909.2亿元，财政总收入达51.2亿元，' +
            '“十一五”以来年均增速分别达12%、15.6%和20.2%。</p>' +
            '<p>福清, <a href="http://baike.baidu.com/view/33540.htm">' +
            'http://baike.baidu.com/view/33540.htm</a></p>' +
            '</div>' +
            '</div>';

             var infowindow = new google.maps.InfoWindow({
                 content: fuqingInformation
             });

             //when users click the fuqing's overlay then
             //display fuqing information box
             google.maps.event.addListener(marker, 'click', function () {
                 infowindow.open(map, marker);
             });
         }
     </script>
  
    <body onload="initialize()" >
         <h2>
            <center>欢迎来到福清人在悉尼!</center>
            <br />
            <center>Coming Soon!!</center>
        </h2>
        <br />
        <center><div id="map_canvas" style="width: 900px; height: 600px"></center> 
       </div>
    </body>
   
</asp:Content>
